<template>
	<view class="bg">
		<view v-for="(item,index) in accordion" :key="index" v-if="accordion" class="item" @click="goToMessageDetail(item)">
			<view class="item-img">
				<image mode="aspectFill" :src="item.img" class="img-notice"></image>
			</view>
			<view class="item-title">{{item.title}}</view>
		</view>
		<view v-if="showNone" class="notimeline">
			<img src='../../static/img/noMsg.png' class="img-none" />
			<view class="text">暂无消息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accordion: [],
				page: {
					size: 10,
					current: 1
				},
				showNone: false,
			}
		},
		onUnload() {
			this.page = {
				size: 10,
				current: 1
			}
			this.list = []
			this.showLoadMore = false;
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.accordion = []
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData() {
				setTimeout(() => {
					this.list = this.$req.crm('/notice/list', {
						dictNoticeType: "C",
						page: this.page
					}).then(v => {
						if(this.page.current==1){
							this.accordion = [];
						}
						if (v.data.records) {
							let list = v.data.records.map(t => {
								let obj = {}
								obj.id = t.id;
								obj.title = t.title
								let n = Math.round(Math.random()*7+1);
								let img = `../../static/message/message${n}.jpg`
								obj.img = t.picUrl?t.picUrl:img;
								return obj
							})
							this.accordion = this.accordion.concat(list)
						} else {
							uni.stopPullDownRefresh();
							setTimeout(function(){
								this.showNone = true;
							},1000)
						}
					})
				}, 300);
				
			},
			goToMessageDetail(item){
				uni.navigateTo({
					url: '/pages/message/newMessageDetail?id=' + item.id
				});
			}
		}
	}
</script>

<style>
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	.notimeline {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.img-none {
		width: 100%;
		height: auto;
	}
	
	.text {
		width: auto;
		height: 50upx;
		font-size: 28upx;
		color: #999;
	}
	.item{
		width: 90%;
		height: 300upx;
		position: relative;
		margin: 5vw;
		border-radius: 5px;
		/* border: 1px solid #E6E6E6; */
		box-shadow: 0 1px 12px 4px #eeeeee;
		overflow: hidden;
	}
	.item-img{
		width: 100%;
		height: 220upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.img-notice{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.item-title{
		width: 94%;
		height: 80upx;
		position: relative;
		top: 0;
		left: 0;
		padding: 0 3%;
		line-height: 80upx;
		font-size: 32upx;
		font-weight: 500;
		color: #555;
		overflow:hidden; 
		text-overflow:ellipsis;
		white-space: nowrap;
		border-top: 1px solid #e6e6e6;
	}
</style>
